<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #container{
            margin: 20px;
        }
        #container table{
            /*display: flex;*/
            width: 100%;
            border: 1px solid gray;
            border-collapse: collapse;

        }
        #container table td,#container table th{
            border: 1px solid grey;
            text-align: center;
            height: 40px;
        }
        #container table td{
           font-size: 12px;
        }

        #container table tbody tr:nth-child(even){
            background-color: #80CCDE;
        }
        #container table tbody tr:nth-child(odd){
            background-color: #d5fcff;
        }
        #container table tbody tr:nth-child(odd):hover{
            background-color: powderblue;
        }
        #container table tbody tr:nth-child(even):hover{
            font-style: italic;
            background-color: darkturquoise;
            color: black;
        }
        #container a{
            text-decoration: none;
            margin-right: 10px;
        }
        #container table tbody tr:hover{
            background-color: #eaf8ff;
            color: cornflowerblue;
        }

        #container span{
            width: 30px;
            height: 30px;
            line-height: 30px;
            display: inline-block;
            background-color: lightcyan;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="container">
        <table>
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="quan">全选

                    </td>
                    <td>编号</td>
                    <td>类别</td>

                    <td>价格</td>
                    <td>说明</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>
                        <input type="checkbox" name="id1"value="1">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr>
                <tr>
                    <th>
                        <input type="checkbox" name="id1"value="1">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr><tr>
                    <th>
                        <input type="checkbox" name="id1"value="1">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr><tr>
                    <th>
                        <input type="checkbox" name="id1"value="1"  onclick="changCheckBox()">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr><tr>
                    <th>
                        <input type="checkbox" name="id1"value="1"  onclick="changCheckBox()">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr><tr>
                    <th>
                        <input type="checkbox" name="id1"value="1"  onclick="changCheckBox()">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr><tr>
                    <th>
                        <input type="checkbox" name="id1"value="1"  onclick="changCheckBox()">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr><tr>
                    <th>
                        <input type="checkbox" name="id1"value="1"  onclick="changCheckBox()">
                    </th>
                    <th>1</th>
                    <th>早餐</th>
                    <th>7</th>
                    <th>七个卤蛋</th>
                    <th>
                        <a href="">删除</a><a href="">修改</a>
                    </th>
                </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="6">
                    <button>批量删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="6">
                    <span>1</span><span>2</span><span>3</span><span>4</span>...<span>15</span>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    var chs = document.getElementsByName("ids");

    function selectAll(f) {
        //从页面中获取name = ids的控件。
        for (let i in chs) {
            chs[i].checked=f.checked;

        }
    }
    function selectRevose() {
        for (let i in chs) {
            if (chs[i].checked==true){
                chs[i].checked=false;
            }else {
                chs[i].checked=true;
            }
        }
    }
    function changCheckBox() {
        var ch = document.getElementById("monsiter");
        var flag = true;
        for (let i = 0; i < chs.length; i++) {
            if (chs[i].checked==false){
                flag=false;
                break;
            }

        }
        ch.checked=flag;
    }

</script>
</html>